<!--
 * @description: 
 * @Date: 2022-11-04 16:09:19
 * @LastEditTime: 2022-11-10 16:32:05
-->
<template>
  <div class="customBox">
    <div class="" v-loading="loading">
      <el-form :label-position="'right'" label-width="80px" class="w-2/3">
        <el-form-item label="标签网址">
          <el-input v-model="info.url" placeholder="请输入带http开头的网址">
            <template #append>
              <el-button type="primary" @click="geticon">获取图标</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="标签名称">
          <el-input v-model="info.name" placeholder="标签名称"></el-input>
        </el-form-item>
        <el-form-item label="标签Logo">
          <el-input v-model="info.src" placeholder="请上传或粘贴标签图标地址">
            <template #append>
              <el-upload
                class="upload-demo"
                :show-file-list="false"
                :on-success="upimg"
                :action="store.state.site.upload"
              >
                <el-button type="primary">上传</el-button>
              </el-upload>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="文字图标">
          <el-input
            v-model="textLogo.text"
            placeholder="请输入文字"
            maxlength="6"
          ></el-input>
        </el-form-item>
        <el-form-item label="文字背景">
          <div class="space-x-2 flex">
            <div
              v-for="item in colors"
              class="colors-picker cursor-pointer"
              :style="{ background: item }"
              @click="selColor(item)"
            ></div>
            <el-color-picker v-model="textLogo.backgroundColor" show-alpha />
          </div>
        </el-form-item>
        <el-form-item label="选择Logo">
          <div class="col-span-2 h-16 flex">
            <div class="relative" v-if="info.src" @click="logoSelNum(1)">
              <div class="iconsel absolute z-10" v-show="logoSel == 1">
                <el-icon>
                  <Select />
                </el-icon>
              </div>
              <img
                :src="info.src"
                class="rounded-2xl mr-3 bg-slate-100"
                style="width: 60px; height: 60px"
              />
            </div>
            <div class="relative" v-if="textLogo.text" @click="logoSelNum(2)">
              <div class="iconsel absolute z-10" v-show="logoSel == 2">
                <el-icon>
                  <Select />
                </el-icon>
              </div>
              <div
                class="custom-icon select-none"
                id="custom-icon"
                :style="{ backgroundColor: textLogo.backgroundColor }"
              >
                <div :class="'f' + textLogo.text.length">{{ textLogo.text }}</div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="w-1/2 pl-20">
        <el-button type="primary" class="w-40" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import emitter from "@/util/emitter";
import { onUnmounted, ref, defineProps } from "vue";
import { useStore } from "vuex";
import uuid from "@/util/uuid.js";
import * as html2canvas from "html2canvas";
import dataURLtoBlob from "@/util/baseToFile";
import ajax from "../../../util/ajax";
import { ElMessage } from "element-plus";
import { Check, Select } from "@element-plus/icons-vue";
const colors = [
  "#3498db",
  "#1abc9c",
  "#2ecc71",
  "#e74c3c",
  "#f1c40f",
  "#e67e22",
  "#2c3e50",
  "#0abde3",
  "#5f27cd",
];
const show = ref(false);
const textLogo = ref({
  text: "",
  backgroundColor: "rgb(5, 148, 231)",
});
const logoSel = ref(1);
const logoSelNum = (w) => {
  logoSel.value = w;
};
const prop = defineProps({
  data: {
    type: Object,
  },
});
const loading = ref(false);
const store = useStore();
const defData = {
  id: "",
  name: "",
  src: "",
  url: "",
  size: "1x1",
  type: "icon",
  sort: 99999,
};
const info = ref(Object.assign({}, defData));
if (prop.data?.id) {
  info.value = prop.data;
  textLogo.value.text = prop.data?.name.substr(0, 6);
}
const open = (data = false) => {
  info.value = Object.assign({}, defData);
  if (data) {
    info.value = data;
  }
  show.value = true;
};
const selColor = (item) => {
  textLogo.value.backgroundColor = item;
};
const geticon = async () => {
  loading.value = true;
  try {
    const dt = await ajax({
      url: "/linkStore/getIcon",
      method: "post",
      data: { url: info.value.url },
    });
    if (dt.code == 1) {
      info.value.src = dt.data.src;
      info.value.name = dt.data.name;
      textLogo.value.text = dt.data.name.substr(0, 2);
      loading.value = false;
      return;
    }
  } catch (error) {}
  ajax({
    url: "api/getIcon",
    params: {
      url: info.value.url,
    },
  })
    .then((el) => {
      if (el.code == 1) {
        info.value.src = el.data.src;
        info.value.name = el.data.name.substr(0, 20);
        textLogo.value.text = el.data.name.substr(0, 2);
      } else {
        ElMessage.error("获取网站数据失败,请手动设置");
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const upimg = (data) => {
  if (data.code == 1) {
    info.value.src = data.data.url;
  } else {
    ElMessage.error(data.msg);
  }
};

const renderLogo = () => {
  return new Promise((res, rej) => {
    window
      .html2canvas(document.querySelector("#custom-icon"), {
        backgroundColor: "transparent",
        width: 60,
        height: 60,
        willReadFrequently: false,
        scrollY: 0,
        scrollX: 0,
      })
      .then((canvas) => {
        let file = dataURLtoBlob(canvas.toDataURL());
        let dt = new FormData();
        dt.append("file", file);
        ajax({
          url: store.state.site.upload,
          method: "post",
          data: dt,
        })
          .then((el) => {
            if (el.code == 1) {
              res(el.data.url);
            }
          })
          .catch(() => {
            rej(false);
          });
      });
  });
};
const save = async () => {
  if (info.value.name == "" || info.value.url == "") {
    return ElMessage.warning("请设置标签信息");
  }
  loading.value = true;
  if (logoSel.value == 2) {
    try {
      const data = await renderLogo();
      if (data) {
        info.value.src = data;
      }
    } catch (error) {}
  }
  if (info.value.url.slice(0, 3) == "tab") {
    //
  } else if (info.value.url.slice(0, 4) != "http") {
    info.value.url = "http://" + info.value.url;
  }
  if (info.value.id == "") {
    //新增
    info.value.id = uuid();
    store.state.link.push(info.value);
    store.commit("updateLink");
  } else {
    store.commit("setLink", info.value);
  }
  loading.value = false;
  emitter.emit("closePlugin");
  show.value = false;
};
emitter.on("linkEdit", open);
onUnmounted(() => {
  emitter.off("linkEdit".open);
});
</script>
<style lang="less">
.customBox {
  width: 100%;
}

.iconsel {
  position: absolute;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--iconRadius);
  background-color: rgba(0, 0, 0, 0.349);
}

.colors-picker {
  width: 30px;
  height: 30px;
  background-color: aqua;
  border-radius: 4px;
}
</style>
